<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主题颜色</title>
</head>

<body>
    <div class="bg">
        <text>theme 主题</text>
        <div>
            <input id="lightBtn" type="radio" value="light" name="radioBtn" checked> light
            <input id="drakBtn" type="radio" value="dark" name="radioBtn"> dark
            <input id="OSBtn" type="radio" value="OS" name="radioBtn"> OS
        </div>
        
    </div>

</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    /* 亮色主题 */
    :root {
        --text-color: #333;
        --bg1: #c7ffdd;
        --bg2: #fbdd88;
    }

    /* 暗色主题 */
    html[data-theme='dark'] {
        --text-color: #fff;
        --bg1: #102128;
        --bg2: #2d5567;
    }

    .bg {
        background: linear-gradient(var(--bg1), var(--bg2));
        text-align: center;

        width: 100vw;
        height: 100vh;
        
    }

    text {
        color: var(--text-color);
        font-size: 48px;
    }
</style>

<script>
    // 设置主题颜色
    function setTheme(value) {
        if(value == 'OS'){
            followOS()
        }else{
            document.documentElement.dataset.theme = value
        }
        
    }
    function followOS(){
        let match = matchMedia('(prefers-color-scheme: dark)')
        if(match.matches){
            document.documentElement.dataset.theme = 'dark'
        }else{
            document.documentElement.dataset.theme = 'light'
        }
    }
   /* 点击按钮，设置主题*/
   let lightBtn = document.querySelector('#lightBtn')
   lightBtn.addEventListener('click',function(event){
     setTheme(lightBtn.value)
   })
   let drakBtn = document.querySelector('#drakBtn')
   drakBtn.addEventListener('click',function(){
    setTheme(drakBtn.value)
   })
   let OSBtn = document.querySelector('#OSBtn')
   OSBtn.addEventListener('click',function(){
    setTheme(OSBtn.value)
   })
  

</script>

</html>